<div class="form-group">
  <label class="control-label col-md-4 col-xs-4"></label>
  <label class="checkbox-show-picture show-type-radio"><input type="radio" data-role="radio-yes" name="data[{{ code }}][{{ dataId }}][showType]" value="picture" {% if data.showType|default('picture') == 'picture' %} checked="checked" {% endif %}> {{'admin.block_manage.visual_edit.tag_as_a_picture_radio'|trans}}</label>
  <label class="checkbox-show-video show-type-radio" style="padding-left: 5%"><input type="radio" data-role="radio-no" name="data[{{ code }}][{{ dataId }}][showType]" value="video" {% if data.showType|default('picture') == 'video' %} checked="checked" {% endif %}> {{'admin.block_manage.visual_edit.tag_display_as_video_radio'|trans}}</label>
</div>

<div class="picture-div" style=" {% if data.showType|default('picture')=='video' %} display: none {% endif %}">
  <div class="form-group">
    <label class="control-label col-md-3 col-xs-3" for="data[{{ code }}][{{ dataId }}][src]">{{'admin.block_manage.visual_edit.tag_img'|trans}}</label>
    <div class="col-md-7 col-xs-7">
      <input class="form-control picture-url" type="text"  readonly="true" name="data[{{ code }}][{{ dataId }}][src]" id="data[{{ code }}][{{ dataId }}][src]" data-role="img-url" value="{{ data.src|default('') }}">
    </div>
    <div class="col-md-2 col-xs-2">
      <div class="btn btn-default btn-sm img-upload webuploader-container" id="item-{{ code }}-uploadId-{{ dataId }}" data-url="{{ path('admin_v2_block_picture_upload', {blockId:block.id, code:code}) }}">{{'admin.block_manage.visual_edit.tag_img_upload'|trans}}</div>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-3 col-xs-3" for="data[{{ code }}][{{ dataId }}][alt]">{{'admin.block_manage.visual_edit.tag_img_describe'|trans}}</label>
    <div class="col-md-8 col-xs-8">
      <input class="form-control js-label-input" type="text" name="data[{{ code }}][{{ dataId }}][alt]" id="data[{{ code }}][{{ dataId }}][alt]" value="{{ data.alt|default('') }}" >
    </div>

  </div>

  <div class="form-group">
    <label class="control-label col-md-3 col-xs-3" for="data[{{ code }}][{{ dataId }}][href]">{{'admin.block_manage.visual_edit.tag_img_link'|trans}}</label>
    <div class="col-md-8 col-xs-8">
      <input class="form-control" type="text" name="data[{{ code }}][{{ dataId }}][href]" id="data[{{ code }}][{{ dataId }}][href]" value="{{ data.href|default('') }}" placeholder="{{ app.request.getScheme() }}://">
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-3 col-xs-3">{{'admin.block_manage.visual_edit.tag_img_background_color'|trans}}</label>
    <div class="col-sm-8">
      <input type="text" class="form-control colorpicker-input width-input-small"
             name="data[{{ code }}][{{ dataId }}][background]" id="data[{{ code }}][{{ dataId }}][background]"
             placeholder="{{ data.background|default('') }}" value="{{ data.background|default('') }}">
    </div>
  </div>
  <input name="data[{{ code }}][{{ dataId }}][fileId]" data-role="file-id" value="{{ data.fileId|default('') }}" type="hidden">
  <input name="data[{{ code }}][{{ dataId }}][videosrc]" data-role="file-id" value="{{ data.videosrc|default('') }}" type="hidden">
  <input name="data[{{ code }}][{{ dataId }}][coversrc]" data-role="file-id" value="{{ data.coversrc|default('') }}" type="hidden">
  <input name="data[{{ code }}][{{ dataId }}][altVideo]" data-role="file-id" value="{{ data.altVideo|default('') }}" type="hidden">
</div>
<div class="video-div" style=" {% if data.showType|default('picture')=='picture' %} display: none {% endif %}">


  <div class="form-group">

    <label class="control-label col-md-3 col-xs-3" for="data[{{ code }}][{{ dataId }}][videosrc]">{{'material_lib.type.video'|trans}}</label>
    <div class="upload-mode">
    </div>
    <div class="row form-group col-md-8 col-xs-8" id="upload-panel" data-params-url="{{ path('admin_v2_uploadfile_head_leader_params') }}" data-hls-encrypted="1">
      <div class="controls col-md-8">

        <div class="col-md-7 col-xs-7 head-leader-edit" style="width: 158.333%">
          <input name="data[{{ code }}][{{ dataId }}][fileId]" data-role="file-id" value="{{ data.fileId|default('') }}" type="hidden">
          <input class="form-control picture-url" type="text" name="data[{{ code }}][{{ dataId }}][videosrc]" id="data[{{ code }}][{{ dataId }}][src]" data-role="img-url"  readonly="true" value=" {{ data.videosrc|default('') }}">

          <button class="btn btn-link btn-sm edit-btn video-buton" type="button"><i class="glyphicon glyphicon-edit"></i> {{ 'course.live.replay_manage.file_upload'|trans }}</button>
        </div>

        <div class="file-chooser-main"
             style="display:none;"
        >
          {% set token = uploader_token('attachment', 0, 'private') %}
          <div id="balloon-uploader"
               data-init-url="{{ path('uploader_init', {uploaderToken:token}) }}"
               data-finish-url="{{ path('uploader_finished', {uploaderToken:token}) }}"
               data-upload-auth-url="{{ path('uploader_auth', {token:token}) }}"
               data-accept="{{ uploader_accept('attachment', 'video')|json_encode }}"
               data-process="{{ uploader_process('attachment') }}">
          </div>
        </div>
      </div>
    </div>
    </div>

  <div class="form-group">
    <label class="control-label col-md-3 col-xs-3" for="data[{{ code }}][{{ dataId }}][coversrc]">{{'admin.block_manage.visual_edit.tag_video_img'|trans}}</label>
    <div class="col-md-7 col-xs-7">
      <input class="form-control picture-url" type="text"  readonly="true" name="data[{{ code }}][{{ dataId }}][coversrc]" id="data[{{ code }}][{{ dataId }}][coversrc]" data-role="img-url" value="{{ data.coversrc|default('') }}">
    </div>
    <div class="col-md-2 col-xs-2">
      <div class="btn btn-default btn-sm img-upload1 webuploader-container" id="item-{{ code }}-uploadId-{{ dataId }}-cover" data-url="{{ path('admin_v2_block_picture_upload', {blockId:block.id, code:code}) }}">{{'admin.block_manage.visual_edit.tag_img_upload'|trans}}</div>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-3 col-xs-3" for="data[{{ code }}][{{ dataId }}][alt]">{{'admin.block_manage.visual_edit.tag_video_describe'|trans}}</label>
    <div class="col-md-8 col-xs-8">
      <input class="form-control js-label-input" type="text" name="data[{{ code }}][{{ dataId }}][altVideo]" id="data[{{ code }}][{{ dataId }}][altVideo]" value=" {{ data.altVideo|default('') }}" >
    </div>

  </div>
  <input name="data[{{ code }}][{{ dataId }}][src]" data-role="file-id" value="{{ data.src|default('') }}" type="hidden">
  <input name="data[{{ code }}][{{ dataId }}][alt]" data-role="file-id" value="{{ data.alt|default('') }}" type="hidden">
  <input name="data[{{ code }}][{{ dataId }}][href]" data-role="file-id" value="{{ data.href|default('') }}" type="hidden">
  <input name="data[{{ code }}][{{ dataId }}][target]" data-role="file-id" value="{{ data.target|default('') }}" type="hidden">
  <input name="data[{{ code }}][{{ dataId }}][target]" data-role="file-id" value="{{ data.target|default('') }}" type="hidden">
  <input name="data[{{ code }}][{{ dataId }}][background]" data-role="file-id" value="{{ data.background|default('') }}" type="hidden">
</div>